'use client';
import { Button, Col, Form, Input, Row, Select, Space, theme } from 'antd';
import { useState } from 'react';
import { DownOutlined } from '@ant-design/icons';

const { Option } = Select;

const searchLabels = [
    '用户名',
    '角色',
    '标签',
]

const AdvancedSearchForm = () => {
    const { token } = theme.useToken();
    const [form] = Form.useForm();
    const [expand, setExpand] = useState(false);
  
    const formStyle: React.CSSProperties = {
      maxWidth: 'none',
      background: token.colorFillAlter,
      borderRadius: token.borderRadiusLG,
      padding: 24,
    };
  
    const getFields = () => {
      const children = [];
      children.push(
        <Col span={8} key={0}>
          <Form.Item
            name={'name'}
            label={"用户名"}
          >
            <Input placeholder="关键词搜索" />
          </Form.Item>
        </Col>,
        <Col span={8} key={1}>
          <Form.Item
            name={'role'}
            label={"角色"}
          >
            <Select>
              <Option value={1}>超级管理员</Option>
              <Option value={2}>开发者</Option>
            </Select>
          </Form.Item>
        </Col>,
        <Col span={8} key={2}>
          <Form.Item
            name={'tags'}
            label={"标签"}
          >
            <Select>
              <Option value="前端工程师">前端工程师</Option>
              <Option value="后端工程师">后端工程师</Option>
              <Option value="全栈工程师">全栈工程师</Option>
            </Select>
          </Form.Item>
        </Col>,
      );
      return children;
    };
  
    const onFinish = (values: any) => {
      console.log('Received values of form: ', values);
    };
  
    return (
      <Form form={form} name="advanced_search" style={formStyle} onFinish={onFinish}>
        <Row gutter={24}>{getFields()}</Row>
        <div style={{ textAlign: 'right' }}>
          <Space size="small">
            <Button type="primary" htmlType="submit">
              搜索
            </Button>
            <Button
              onClick={() => {
                form.resetFields();
              }}
            >
              清空
            </Button>
            <a
              style={{ fontSize: 12 }}
              onClick={() => {
                setExpand(!expand);
              }}
            >
              <DownOutlined rotate={expand ? 180 : 0} /> {!expand ? '收起' : '展开'}
            </a>
          </Space>
        </div>
      </Form>
    );
  };

export default AdvancedSearchForm